<template>
	<view>
		<normal-paging ref="normalPagingRef" v-bind="normalPagingConfig">
			<template #top>
				<custom-nav v-bind="navConfig">
					<view slot="right" v-if="userInfo.role_ids.includes(1) || userInfo.role_ids.includes(3) || userInfo.role_ids.includes(4)">
						<u--text :lines="1" :suffixIcon="!isUsers ? 'arrow-down' : 'arrow-up'" color="#222222" iconStyle="font-size: 14px; padding: 3px 5px 0 2px; color: #222222" size="14" :text="user_obj.nickname" style="max-width: 80px;" @click="handleUserList"></u--text>
					</view>
				</custom-nav>
			</template>
			<template #dataList="{item}">
				<Item :info="item"/>
			</template>
		</normal-paging>
		<!-- 组员信息 -->
		<u-popup :show="isUsers" @close="isUsers = false" closeable mode="right" safeAreaInsetTop>
			<view class="text-xs" style="width: 70vw; padding: 0 15px;">
				<!-- 虚拟列表 -->
				<!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
				<z-paging unit="px" ref="userListPaging" :fixed="false" :height="zPagingHeight" use-virtual-list>
					<!-- 通过slot="cell"插入列表for循环的cell，slot-scope中提供当前for循环的item和index -->
					<!-- 因字节跳动小程序不支持slot-scope，因此不支持字节跳动小程序 -->
					<view slot="cell" slot-scope="{item,index}">
						<view class="bg-white press-down-active" style="padding: 5px 0; margin-bottom: 10px; border-radius: 4px;" @click="() => {
							user_obj = item
							normalPagingConfig.otherObj.user_id = item.user_id
							$refs.normalPagingRef.reload()
							isUsers = false
						}">
							<view class="Media">
								<u--image shape="circle" :src="item.avatar_url" width="45px" height="45px" />
								<view class="Media-body text-xs" style="padding: 0 10px;">
									<view class="Grid">
										<view style="margin-bottom: 10px;">ID:{{item.user_id}}</view>
									</view>
									<view class="Grid">
										<view style="max-width: 100px;">{{item.nickname}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import navConfig from './config/navConfig.js'
	import normalPagingConfig from './config/normalPagingConfig.js'
	import Item from './cps/item.vue'

	export default {
		components: {
			Item
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		data() {
			return {
				navConfig,
				normalPagingConfig,
				isUsers: false,
				user_obj: {
					nickname: '组员',
					user_id: ''
				},
				zPagingHeight: `${uni.getSystemInfoSync().windowHeight - 100}px`
			};
		},
		onLoad(options) {
			this.normalPagingConfig.otherObj.user_id = this.user_obj.user_id ? this.user_obj.user_id : this.userInfo.user_id
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: `${this.userInfo.wechat_info.title}`
			})
		},
		methods: {
			handleUserList() {
				this.isUsers = true
				this.$nextTick(() => {
					this.$refs.userListPaging.complete(this.userInfo.user_list || []);
				})
			}
		}
	}
</script>

<style lang="scss">

</style>